<style lang="less">
@import "../../assets/style/xinzheng.less";
</style>
<style scoped>
	.imgWeigth{
		width: 60px;
		height: 60px;
	}
	.van-cell__value{
		color: #999999;
	}
	.spanCon{
		font-size: 14px;
    		padding-left: 20px;
	}
</style>

<template>
<mxq-router-layout>
    <div class="xinzheng">
        <Head slot="header" @headerClick="headerClick($event)">
			<div slot="headerTitle">
				{{headerTitle}}
			</div>
			<div slot="headerRight">
				<i class="iconfont icon-shouye"/>
				<!--<van-icon class="home" name="home"/>-->
			</div>
		</Head>
		
        <van-cell-group class="mt10">
			<yh-fangxun :is="currentYh" :xgListArr="xgListArr"  @getParams="getParams($event)"/>
        </van-cell-group>
        
        <section class="van-doc-demo-block">
	        	<h5 class="van-doc-demo-block-title">照片记录</h5>
	        <van-cell-group class="mt10">
				<van-field
					class="detail_item"
	                clearable
	                :label="lsLabel"
	                disabled>
					<van-icon slot="icon" class="slot-cont">
						<img v-if="lsPhotosArr && lsPhotosArr.length>=1"  v-for="(img,index) in lsPhotosArr" :key="index" :src="img.FILE_PATH" @click="previewImg(lsPhotosArr,index)" class="imgWeigth">
						<div class="spanCon" v-if="lsPhotosArr.length==0">无照片</div>
					</van-icon>
	           </van-field>
	           <van-field
					class="detail_item"
	                clearable
	                :label="clLabel"
	                disabled>
					<van-icon slot="icon" class="slot-cont">
						<img v-if="clPhotosArr && clPhotosArr.length>=1" v-for="(img,index) in clPhotosArr" :key="index" :src="img.FILE_PATH" @click="previewImg(clPhotosArr,index)" class="imgWeigth">
						<div class="spanCon" v-if="clPhotosArr.length==0">无照片</div>
					</van-icon>
	            </van-field>
			</van-cell-group>
		</section>
		
        <div class="btn_box" v-if="showBtn">
            <van-button size="small" class="btn_l" @click="saveShenhe(2)">不通过</van-button>
            <van-button size="small" class="btn_r" @click="saveShenhe(1)">通过</van-button>
        </div>
    </div>
</mxq-router-layout>
</template>

<script>
import Head from '@/components/head'
import YhFangxun from '@/view/components/shenhe/yinhuan-fangxun'
import YhJianzhu from '@/view/components/shenhe/yinhuan-jianzhu'
import YhJiaocha from '@/view/components/shenhe/yinhuan-jiaocha'
import YhOther from '@/view/components/shenhe/yinhuan-other'
import YhShigong from '@/view/components/shenhe/yinhuan-shigong'
import YhShuzhang from '@/view/components/shenhe/yinhuan-shuzhang'
import YhXiaofang from '@/view/components/shenhe/yinhuan-xiaofang'
import YhYiwu from '@/view/components/shenhe/yinhuan-yiwu'
import { callData,fileUrl } from '../../axios/axios'
import {
    Cell,
    CellGroup,
    Field,
    Button,
    Icon,
    Toast,
    Popup,
    SwitchCell,
	ImagePreview
} from 'vant'

export default {
    name: 'shenheGuanli',
    components: {
        Head,
        YhFangxun,YhJianzhu,YhJiaocha,YhOther,
        YhShigong,YhShuzhang,YhXiaofang,YhYiwu,
        [Cell.name]:Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [Toast.name]: Toast,
        [Popup.name]: Popup,
        [SwitchCell.name]: SwitchCell
    },
    data() {
        return {
        		listDataArr: [],
        		xgListArr: {},
        		currentYh: null,
        		headerTitle: "隐患审核详情",
        		clLabel: '隐患处理照片',
        		lsLabel: '隐患照片',
        		clPhotosArr: [],
        		lsPhotosArr: [],
        		query: this.$route.query,
        		checked: true,
        		isSuperior: 0,
            showBtn: true,
            getParam: {},
            imgs:[]
        }
    },
    methods: {
        // 头部两侧按钮点击事件
		headerClick(e){
			this.$router.push({name:"index"})
		},
		// 照片放大
    		previewImg(img,index){
			let imgArr = []
			img.forEach((item,index) => {
				if(item.FILE_PATH) imgArr.push(item.FILE_PATH)
			})
			if(imgArr.length != 0){
				ImagePreview({
					images: imgArr,
					startPosition: index
				})
			}
		},
		// 拿到隐患、缺陷的数据
		getYhQxData(){
			let _this = this
			let param = {}
				param.reviewType = this.query.isYhOrDefect
				param.reviewId = this.query.reviewId
			callData('/accountServer/YhDefectCheck/findYhDefectDetails', 'get', param).then(res => {
				if(res.success){
					let data = res.data
					_this.formatYhData(data)
				}
			})
		},
		// 格式化照片成服务器地址
		formatPhoto(photos){
			let photoArr = []
			photos.forEach((item,index)=>{
				item.FILE_PATH = fileUrl(item.FILE_PATH)
				photoArr.push(item)
			})
			return photoArr
		},
		// 确定是那个类型的隐患
		getYhlb(){
			let yinhuanIndex = this.query.lbid;
			if(yinhuanIndex == '503988636121874432'){	//树障
	        		this.currentYh = YhShuzhang;
	        	}else if(yinhuanIndex == '503989129904701440'){	//违章建筑物
	        		this.currentYh = YhJianzhu;
	        	}else if(yinhuanIndex == '503989282900328448'){	//交叉跨越隐患
	        		this.currentYh = YhJiaocha;
	        	}else if(yinhuanIndex == '503989531907768320'){	// 异物隐患
	        		this.currentYh = YhYiwu;
	        	}else if(yinhuanIndex == '503989671221575680'){	//施工外破
	        		this.currentYh = YhShigong;
	        	}else if(yinhuanIndex == '503989986297692160'){	//消防隐患
	        		this.currentYh = YhXiaofang;
	        	}else if(yinhuanIndex == '503990076341010432'){	//	防汛隐患
	        		this.currentYh = YhFangxun
	        	}else {	//其他隐患503990222193737728
	        		this.currentYh = YhOther
	        	}
		},
		// 格式化缺陷的数据
		formatYhData(res){
			let data = res.Details,
				clPhoto = res.pictureYou,
				lsPhoto = res.picture;
			this.getYhlb()
			this.clPhotosArr = this.formatPhoto(clPhoto)
			this.lsPhotosArr = this.formatPhoto(lsPhoto)
			this.xgListArr = {
				data: res.Details,
				pid: this.query.lbid
			}
		},
		// 拿到修改的数据
		getParams(e){
			console.log("拿到：",e)
			this.getParam = e
		},
		// 点击通过|不通过的按钮
		saveShenhe(num){
			let _this = this
			let param = this.getParam
				param.id = this.query.id
				param.approvalStatus = num
				param.isSuperior = this.isSuperior
				param.reviewId  = this.query.reviewId
				param.isYhOrDefect = this.query.isYhOrDefect
			callData('/accountServer/YhDefectCheck/assessmentYhDefect', 'post', param).then(res => {
				if(res.success){
					this.$router.push({
						name: 'shenhe_list'
					})
				}else{
					Toast(res.data);
				}
			})
		},
		isShowList(){
			if(this.query.active == 1) this.showBtn = false
			else this.showBtn = true
		}
    },
    mounted() {
    		this.isShowList()
        this.getYhQxData()
    }
}
</script>
